{"componentChunkName":"component---src-templates-blog-post-js","path":"/Today I Learned/hover에_따라_주고싶은_element_스타일링하기/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"64ac6c6a-b878-5e8f-af6c-68887bca6645","excerpt":"ex1) 인접한 경우 Ex2) 인접하지 않은 경우 Ex3) parent to child Ex3) child to parent","html":"

ex1) 인접한 경우

\n
<div class=\"a\">\n  <div>hover me</div>\n</div>\n<div class=\"b\">\n  <div>style me</div>\n</div>
\n
.a:hover + .b > div {\n    background: #ccc\n}
\n

Ex2) 인접하지 않은 경우

\n
<div class=\"a\">\n  <div>hover me</div>\n</div>\n<div>hello</div>\n<div>world</div>\n<div class=\"b\">\n  <div>style me</div>\n</div>
\n
.a:hover ~ .b > div {\n    background: #ccc\n}
\n

Ex3) parent to child

\n
<div class=\"parent\">\n  hover me\n  <div class=\"child\">style me</div>\n</div>
\n
.parent:hover .child {\n  color: yellow\n}
\n

Ex3) child to parent

\n
<div class=\"parent\">\n  style me\n  <div class=\"child\">hover me</div>\n</div>
\n
div.parent {  \n    pointer-events: none;\n}\n\ndiv.child {\n    pointer-events: auto;\n}\n\ndiv.parent:hover {\n    background: yellow;\n}
","frontmatter":{"title":"hover에 따라 주고싶은 element 스타일링하기","date":"May 10, 2020"}}},"pageContext":{"slug":"/Today I Learned/hover에_따라_주고싶은_element_스타일링하기/","previous":{"fields":{"slug":"/Angular/How_to_handle_query_parameters_in_a_router_link/"},"frontmatter":{"title":"How to handle query parameters in a router link","category":"Angular","draft":false}},"next":{"fields":{"slug":"/JavaScript/Closure/"},"frontmatter":{"title":"Closure","category":"JavaScript","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}